<template>
	<view class="notice">
		<u-navbar title="待办列表" back-icon-color="#fff"
			:background="{backgroundImage: 'linear-gradient(45deg, #68dae7, #21a4b3)'}" title-color="#FFFFFF">
		</u-navbar>
		<view class="notice-wrap">
			<view class="notice-wrap-item" v-for="(item,index) in noticeList" :key="index" @tap="gotoInfo(item)">
				<view class="notice-wrap-item-title">{{item.deviceName}}</view>
				<view class="notice-wrap-item-info" v-if="item.cycleType == 1">
					<view class="notice-wrap-item-info-type orange">巡检</view>
					<view class="notice-wrap-item-info-time">巡检时间:{{item.createTime}}</view>
				</view>
				<view class="notice-wrap-item-info" v-if="item.cycleType == 2">
					<view class="notice-wrap-item-info-type yellow">核查</view>
					<view class="notice-wrap-item-info-time">核查时间:{{item.createTime}}</view>
				</view>
				<view class="notice-wrap-item-info" v-if="item.cycleType == 3">
					<view class="notice-wrap-item-info-type purple">保养</view>
					<view class="notice-wrap-item-info-time">保养时间:{{item.createTime}}</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				pageSize:5,
				pageNum:1,
				noticeList:[]
			}
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {
			this.noticeList = []
			this.getData()
		},
		methods:{
			getData(){
				let params={
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				this.$xt.api.noticeList(params).then(res=>{
					this.noticeList = res.rows
				})
			},
			reloadList(){
				this.pageNum = 1
				this.noticeLis = []
				let params={
					pageSize:this.pageSize,
					pageNum:this.pageNum
				}
				this.$xt.api.noticeList(params).then(res=>{
					this.noticeList = res.rows
				})
			},
			gotoInfo(info){
				this.$u.route({
					url:'pages/device/inspectionInfo',
					type:"navigateTo",
					params:{
						...info
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice{
		&-wrap{
			&-item{
				background-color: #fff;
				margin: 10rpx;
				position: relative;
				padding: 10rpx 20rpx;
				&-title{
					color:#00aaff;
					font-size: 32rpx;
				}
				&-info{
					margin-top: 10rpx;
					&-type{
						position: absolute;
						top:10rpx;
						right: 20rpx;
					}
				}
				
			}
		}
	}
	.orange{
		color:#ffaa00
	}
	.yellow{
		color:#ffea45
	}
	.purple{
		color:#7458ff
	}
</style>